import React, { useEffect } from 'react'
import { Modal, Form, Input, Radio, Checkbox, InputNumber } from 'antd'

// 自定义对话框组件：函数组件
const CustomModal = ({ visible, onCreate, onCancel, modalType, updateData }) => {
  // 使用 form 关联表单组件实例
  const [form] = Form.useForm()

  useEffect(() => {
    form.setFieldsValue(updateData)
  }, [form, updateData])

  return (
    <Modal
      forceRender
      visible={visible}
      title={modalType === 'create' ? '添加健康数据' : '修改'}
      okText={modalType === "create" ? '添加' : '修改'}
      cancelText="取消"
      onCancel={() => {
        form.resetFields()
        onCancel()
      }}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            // values.symptom = values.symptom.join(',')
            form.resetFields()
            onCreate(values) // 添加或修改保存时，调用到该函数
          })
          .catch((info) => {
            console.log('Validate Failed:', info)
          })
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          type: 1,
          isOut: 0
        }}
      >
        <Form.Item name="id" hidden>
          <Input />
        </Form.Item>
        <Form.Item
          name="stuNo"
          label="学号"
          rules={[
            {
              required: true,
              message: '学号必填！',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="clazz"
          label="班级"
          rules={[
            {
              required: true,
              message: '班级必填！',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="name"
          label="姓名"
          rules={[
            {
              required: true,
              message: '姓名必填！',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item name="type" label="测量方式">
          <Radio.Group>
            <Radio value={1}>额温</Radio>
            <Radio value={2}>耳温</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          name="temperature"
          label="体温"
          rules={[
            {
              required: true,
              message: '体温必填！',
            },
            {
              type: 'number',
              message: '必须输入数字的体温数据！'
            }
          ]}
        >
          <InputNumber step={0.1} style={{width: '100%'}} />
        </Form.Item>
        <Form.Item name="address" label="所在地">
          <Input />
        </Form.Item>
        <Form.Item name="isOut" label="是否外出">
          <Radio.Group>
            <Radio value={0}>否</Radio>
            <Radio value={1}>是</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item name="symptom" label="症状">
          <Checkbox.Group>
            <Checkbox value="无">无</Checkbox>
            <Checkbox value="咳嗽">咳嗽</Checkbox>
            <Checkbox value="发热">发热</Checkbox>
            <Checkbox value="胸闷">胸闷</Checkbox>
          </Checkbox.Group>
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default CustomModal
